<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <div id="app" class="container">
        <!-- 前缀 -->
        <div class='input-group'>
            <input type="text" placeholder="输入名称" class="form-control " />
            <span class="input-group-addon  ">@</span>
            <input type="text" placeholder="输入邮箱地址" class="form-control " />
            <span class="input-group-addon ">.com</span>
        </div>
        <hr />
        <!-- 后缀 -->
        <div class='input-group'>
            <input type="text" placeholder="" class="form-control " style="border-right: none;" />
            <span class='input-group-addon glyphicon glyphicon-camera'
                style="top:0;border-right: none;border-left: none;background-color: #fff;"></span>
            <span class="input-group-addon ">百度一下</span>
        </div>
    </div>
</body>

</html>